<template>
  <div class="app-container">
    <div class="pannel">
      <el-form
        ref="departRef"
        :model="formInline"
        :rules="departRules"
        label-position="top"
        label-width="120px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="仓库编码" prop="code">
              <el-input
                v-model="formInline.code"
                placeholder="请输入"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库名称" prop="name">
              <el-input v-model="formInline.name" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库类型" prop="type">
              <el-select
                v-model="formInline.type"
                placeholder="请选择"
                style="width: 106%"
              >
                <el-option
                  v-for="(item, index) in type"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="省/市/区" prop="locationCity">
              <el-cascader
                v-model="locationCity"
                placeholder="请选择"
                :options="options"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="详细地址" prop="address">
              <el-input
                v-model="formInline.address"
                style="width: 100%"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库状态" prop="val">
              <el-radio-group v-model="val" @change="changeMax">
                <el-radio
                  v-for="(item, index) in radioPay"
                  :key="index"
                  :label="item.label"
                  :value="item.label"
                />
              </el-radio-group> </el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="仓库面积" prop="surface">
              <el-input v-model="formInline.surface" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人" prop="personName">
              <el-input v-model="formInline.personName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="formInline.phone" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <div class="button">
            <div class="tac">
              <el-button @click="callBackFn">返回</el-button>
              <el-button type="primary" @click="onSubmit">提交</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  addImformation,
  addWarehouse,
  aclearWarehouse,
  clickWarehouseList
} from '@/api'
import { regionData, CodeToText } from 'element-china-area-data'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      disabled: null,
      id: '',
      options: regionData, // 下拉城市
      formInline: {
        address: '',
        area: '',
        city: '',
        code: '',
        location: '',
        name: '',
        personName: '',
        phone: '',
        province: '',
        status: '',
        surface: '',
        type: ''
      },
      // 表单校验
      departRules: {
        name: [
          { required: true, message: '请填写仓库名称', trigger: ['blur'] }
        ],
        type: [
          { required: true, message: '请选择仓库类型', trigger: ['blur'] }
        ],
        // locationCity: [{ required: true, message: '省/市/区不能为空', trigger: ['blur'] }],
        address: [
          { required: true, message: '请填写详细地址', trigger: ['blur'] }
        ],
        surface: [
          { required: true, message: '请填写仓库面积', trigger: ['blur'] }
        ],
        personName: [
          { required: true, message: '请填写负责人', trigger: ['blur'] }
        ],
        phone: [
          { required: true, message: '负责人电话不能为空', trigger: ['blur'] }
        ]
      },
      locationCity: '',
      val: '',
      // 仓库类型
      type: [
        { name: '中转仓', value: 'ZZ' },
        { name: '加工仓', value: 'JG' },
        { name: '储备仓', value: 'CB' },
        { name: '冷藏仓', value: 'LC' }
      ],
      radioPay: [
        { label: '启用', value: '1' },
        { label: '停用', value: '0' }
      ]
    }
  },
  async created() {
    this.id = this.$route.params.id
    const res = await addImformation()
    console.log(res.data)
    this.formInline.code = res.data
    if (this.id === null) return
    this.area()
  },
  methods: {
    changeMax(val) {
      this.formInline.status = this.radioPay.find(
        (item) => item.label === this.val
      ).value
      console.log(this.formInline.status)
    },

    // 页面初始化调用接口
    // 将请求回来的数据赋值给表单
    // 实现数据回显
    async area() {
      console.log(this.id)
      if (this.id === 'null') return
      const { data } = await aclearWarehouse(this.id)
      this.formInline = data
    },

    // 提交
    // 声明提交事件
    // 对表单进行校验
    // 封装接口引入接口
    // 判断：
    // 如果跳转页面携带id，是编辑仓库
    // 调用接口实现数据回显
    // 如果跳转页面不携带id，是添加仓库
    // 调用添加接口
    // 对城市下拉数据进行处理
    // 筛选出市级区号区级区号、城市文本值
    // 点击提交对表单进行兜底校验
    // 操作成功、提示用户
    // 返回主页面、清空表单
    onSubmit() {
      this.$refs.departRef.validate(async(vaild) => {
        if (!vaild) return Message.warning('请将表单填写完整')
        this.formInline.province = this.locationCity[0]
        this.formInline.area = this.locationCity[1]
        this.formInline.city = this.locationCity[2]
        const citys = this.locationCity
          .map((item) => CodeToText[item])
          .join('/')
        this.formInline.location = citys
        if (!this.id) {
          console.log(citys)
          await addWarehouse(this.formInline)
          Message.success('添加成功')
          this.$router.go(-1)
        } else {
          await clickWarehouseList(this.formInline)
          Message.success('编辑成功')
          this.$router.go(-1)
        }
      })
    },

    // 返回主页面
    // 清空表单、表单校验
    callBackFn() {
      this.$refs.departRef.resetFields()
      this.$router.back()
      this.click()
    },

    // 清空表单方法
    click() {
      this.formInline = {
        address: '',
        area: '',
        city: '',
        code: 'CK015496',
        location: '',
        name: '',
        personName: '',
        phone: '',
        province: '',
        status: '',
        surface: '',
        type: ''
      }
    }
  }
}
</script>

<style>
.el-form-item {
  margin-right: 22px;
}
.el-input__inner {
  background: #f1ecec;
  border-radius: 6px;
  margin-right: 10px;
}
</style>

<style scoped>
.app-container {
  overflow: hidden;
  background-color: #f1ecec;
  padding: 0px 20px;
}
.pannel {
  margin: 20px 0;
  padding: 20px 25px 1px;
  border-radius: 10px;
  background-color: #fff;
}
.button {
  display: flex;
  border-top: 1px solid #f1ecec;
  padding: 14px 220px 0;
}
.tac {
  margin: 0 auto;
}
.tac .el-button {
  border-radius: 40px;
  color: black;
  margin-right: 17px;
  margin-top: 4px;
  height: 38px;
  line-height: 7px;
  width: 170px;
}
</style>
